<template>
	<div class="wrap">	
		<div class="head">
	    	 <div class="headline">			  	    	 	 
	    	 	 <span class="title">数据总量</span>			  	    	 	 
	    	 </div>
	    	 <div class="numberWrap">
	    	 	<span v-for="item in totalNum" class="type1 type">{{item}}</span>
	    	 </div>	
    	 </div>
    	 
    	 <div class="body">
    	 	<div class="left">
    	 		<div class="top">
			    	 <div class="headline">			  	    	 	 
			    	 	 <span class="title">用户数</span>			  	    	 	 
			    	 </div> 
			    	 <div class="numberWrap">
			    	 	<span v-for="item in userNum" class="type2 type">{{item}}</span>
			    	 </div>				    	 
    	 		</div>
    	 		<div class="bottom">
			    	 <div class="headline">			  	    	 	 
			    	 	 <span class="title">点位数</span>			  	    	 	 
			    	 </div> 
			    	 <div class="numberWrap">
			    	 	<span v-for="item in siteNum" class="type2 type">{{item}}</span>
			    	 </div>				    	 
    	 		</div>
    	 	</div>
    	 	<div class="right">
    	 		<div class="top">
			    	 <div class="headline">			  	    	 	 
			    	 	 <span class="title">企业数</span>			  	    	 	 
			    	 </div> 
			    	 <div class="numberWrap">
			    	 	<span v-for="item in deptNum" class="type2 type">{{item}}</span>
			    	 </div>				    	 
    	 		</div>
    	 		<div class="bottom">
			    	 <div class="headline">			  	    	 	 
			    	 	 <span class="title">设备数</span>			  	    	 	 
			    	 </div> 
			    	 <div class="numberWrap">
			    	 	<span v-for="item in deviceNum" class="type2 type">{{item}}</span>
			    	 </div>				    	 
    	 		</div>  	 		
    	 	</div>
    	 </div>
    	 
	</div>
</template>	
<script>
	export default {
		data() {
			return {				
			   deptNum:[],  // 企业数
			   siteNum:[],  // 点位数
			   totalNum:[], // 数据总数
			   userNum:[],  // 用户数
			   deviceNum:[] // 设备数 
			}
		},
		mounted() {

		},
		methods: {
		   formatArr(str,len){
		   	 let arr=[]
		   	 let zero=len-str.length
           	 for(var i=0;i<zero;i++){
           	 	arr.push('0')
           	 }	
           	 for(var i=0;i<str.length;i++){
           	 	arr.push(str[i])
           	 }  
           	 return arr
		   },
		   // 初始化 点位数 企业数	
           init(deptNum,siteNum){
           	 deptNum=deptNum.toString()
           	 siteNum=siteNum.toString()
           	 this.deptNum=this.formatArr(deptNum,5)
           	 this.siteNum=this.formatArr(siteNum,5)          	           	 
           },
           init2(totalNum,userNum,deviceNum){           	
           	 totalNum=totalNum.toString()           	 
           	 userNum=userNum.toString()
           	 deviceNum=deviceNum.toString()
           	 this.totalNum=this.formatArr(totalNum,10)
           	 this.userNum=this.formatArr(userNum,5)     
           	 this.deviceNum=this.formatArr(deviceNum,5)
           },
           init3(totalNum){         
           	 totalNum=totalNum.toString()           	 
           	 this.totalNum=this.formatArr(totalNum,10)
           }           
		}
	}
</script>
<style lang="scss" scoped>
.wrap{display: flex;flex-direction: column;height: 100%;}
.head{padding-bottom: 4px;}
.body{flex: 1;display: flex;
  .left{height: 100%;display: flex;flex-direction: column;width: 48%;margin-right: 4%;}
  .right{height: 100%;display: flex;flex-direction: column;width: 48%;}
  .top{flex: 1;display: flex;flex-direction: column;justify-content: center;}
  .bottom{flex: 1;display: flex;flex-direction: column;justify-content: center;}
}
.headline{
		display: flex;
		color: #fff;		
		.title{
      background: #131420;
      padding: 8px 15px;
      display: inline-block;
      font-size: 14px;
		    box-shadow: inset 0 0 10px 0 rgba(53,145,255,.8);
		    border: 1px solid #3591ff80;          
		}
}	
.numberWrap{height: 60px;display: flex;justify-content: space-around;
   .type{display: flex;height: 100%;background: #17213e;font-size: 45px;  align-items: center;justify-content: center; 
   color: #20dbfd;
   text-shadow: 0 0 25px #00d8ff;
   text-align: center;font-family:yjsz}
   .type1{width: 9%;}
   .type2{width: 19%;}
}
</style>
